var vm = new Vue({
    el: '#app',
    data: {
        // 底部高亮时下标
        cIndex: 0,//保存点击的按钮下标
        // 综合排序时下标
        lindex: 0,
        // 底部按钮的数据
        list: [
            { name: '首页' },
            { name: '订单' },
            { name: '我的' },
        ],
        // 综合排序的数据
        list1: [
            { name: '综合排序' },
            { name: '距离最近' },
            { name: '销量最高' },
            { name: '筛选' }
        ],
        // 年货热卖的数据
        arr: [
            '年货节热卖', '津贴联盟', '满城优惠', '品质联盟'
        ],

        // 店铺信息
        list2: [
            { pic: 'pic.png', name: '金百万烤鸭(苏家坨店)', pf: 4.3, shou: 672, sprice: 25, pl: ['扬州炒饭棒棒的', '扬州炒饭棒棒的'], jian: ['35减12', '33减6', '50减20'] },
            { pic: 'pic.png', name: '稻香金源饺子馆', pf: 4.8, shou: 132, sprice: 35, pl: ['扬州炒饭棒棒的', '扬的'], jian: ['35减12', '33减6', '50减20'] },
            { pic: 'pic.png', name: '稻香金源馆', pf: 3.3, shou: 1562, sprice: 41, pl: ['扬州炒饭棒棒的', '扬州炒会话的'], jian: ['50减20'] },
        ]

    },
    methods: {
        // 底部的按钮
        handleClick(index) {
            this.cIndex = index; // 保存点击的按钮下标
        },
        // 综合排序的按钮
        lClick(index) {
            this.lindex = index;
            // 当点击按照销量排序时
            if (index == 2) {

            }
        },
        sort(index) {
            if (index == 0) {
                this.list2.sort((a, b) => {
                    return a.pf - b.pf;
                })
            } else if (index == 1) {
                this.list2.sort((a, b) => {
                    return a.sprice - b.sprice;
                })
            } else if (index == 2) {
                this.list2.sort((a, b) => {
                    return a.shou - b.shou;
                })
            }
        }
    }
})